.article-summary-card {
  width:33%;
  box-sizing: border-box;
  padding:10px;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  &:hover {
    .arctile-title {
      color: #62bbc3;
    }
    .article-image {
      &::before {
        content: '';
        background: rgba(255,255,255,.2);
        width:100%;
        height: 100%;
        display: block;
      }
    }
  }
  .article-image-wrap {
    cursor: pointer;
    position: relative;
    padding-bottom: 55.71%;
    margin-bottom:10px;
    .article-image {
      display: block;
      height: 100%;
      width:100%;
      background-size: cover;
      position: absolute;
    }
  }
  .arcticle-info {
    .tag-and-time {
      font-size: 14px;
      .arctile-tag {
        color: #62bbc3;
      }
      .artcile-created-time {
        color:#ccc;
      }
    }
    .article-summary {
      .arctile-title {
        height: 33px;
        font-size: 22px;
        word-wrap: break-word;
        overflow: hidden;
        font-weight: normal;
        cursor: pointer;
      }
      .arctile-summary-content {
        color:#ccc;
        font-size: 16px;
        padding:10px 0;
      }
    }
  }
}